<template>
<div>
  <div :style="{height: toolbarHei +'px'}"></div>
  <nut-navbar title="修改密码" left-text="返回" left-show @click-back="clickLeft"></nut-navbar>
  <div style="padding: 10px;color: #0dc3c3;font-size: 14px;">
    密码更新成功后，您将被重定向到登录页面，您可以使用新密码重新登录。
  </div>
  <div >
    <nut-form size="large"  ref="form" :model-value="state.form" :rules="state.rules" label-width="80px" >
      <nut-form-item label="新密码" prop="newPassword">
        <nut-input v-model="state.form.userpwd" type="password" show-password placeholder="请输入新密码"></nut-input>
        <div class="nut-form-item-msg"></div>
      </nut-form-item>
      <nut-form-item>
        <nut-button type="primary" size="large" style="width: 150px;" @click="save">保存密码</nut-button>
      </nut-form-item>
    </nut-form>
  </div>
</div>
</template>

<script setup>


import tool from "@/utils/tool";
import {useGlobal} from "@/stores/useGlobal";
import {computed, onMounted, reactive} from "vue";
import {useRouter} from "vue-router";
const global = useGlobal()
const router = useRouter()
const state = reactive({
  form: {
    id:'',
    userpwd: "",
  },
  rules: {
    userpwd: [
      { required: true, message: '请输入新密码'}
    ],
  }
})
const toolbarHei = computed(() => {
  return global.statusBarHeight
})
onMounted(() => {
  let user = tool.data.getUser()
  state.form.id = user.id
})
const clickLeft = () => {
  router.go(-1)
}
const save = () => {
  if(!state.form.userpwd) return tool.warning('请输入新密码')
  tool.post('user/altPwd', {formData: {id: state.form.id, userpwd: tool.crypto.MD5(state.form.userpwd)}, mod: 'admin'}).then(ret => {
    if(ret.stat) {
      state.form.userpwd = null
      tool.data.logout()
      router.push({name: 'login'})
    }
  })
}
</script>

<style>
</style>
